<template>
	<view class="page">
		<view class="safeVue" :style="{ height: statusBarHeight + 20 + 'rpx' }"></view>
		<view class="topVue flex align-center padding-row30" :style="{ height: barHeight + 'rpx', top: statusBarHeight + 'rpx' }" v-if="isLogin">
			<u-avatar src="https://jjscapp.oss-cn-beijing.aliyuncs.com/avatar/17408910309621740891026695_u=256816879,771155532&fm=253&app=120&size=w931&q=75&n=0&f=JPEG&fmt=auto&maxorilen2heic=2000000.jpg" :size="menuHeight"></u-avatar>
			<text style="line-height: 1; color: #454545; font-weight: 600; font-size: 30rpx; padding-left: 10rpx;">{{ user.phoneNo | conceal() }}</text>
		</view>
		<view class="topVue flex align-center padding-row30" :style="{ height: barHeight + 'rpx', top: statusBarHeight + 'rpx' }" v-else @click="$tools.route('../login/login')">
			<u-avatar src="1" :size="menuHeight"></u-avatar>
			<text style="line-height: 1; color: #454545; font-weight: 600; font-size: 30rpx; padding-left: 10rpx;">登录</text>
		</view>
		<view :style="{ height: statusBarHeight + barHeight + 'rpx' }"></view>
		
		<view class="box margin20 flex">
			<view class="li w25 flex-column align-center" @click="navigote('./order', 1)">
				<image src="../../static/mine/1.png" style="width: 66rpx; height: 66rpx; margin-bottom: 10rpx;"></image>
				<text style="line-height: 1; color: #454545; font-weight: 600;">未接单</text>
			</view>
			<view class="li w25 flex-column align-center" @click="navigote('./order', 2)">
				<image src="../../static/mine/2.png" style="width: 66rpx; height: 66rpx; margin-bottom: 10rpx;"></image>
				<text style="line-height: 1; color: #454545; font-weight: 600;">接单人</text>
			</view>
			<view class="li w25 flex-column align-center" @click="navigote('./order', 3)">
				<image src="../../static/mine/3.png" style="width: 66rpx; height: 66rpx; margin-bottom: 10rpx;"></image>
				<text style="line-height: 1; color: #454545; font-weight: 600;">已完成</text>
			</view>
			<view class="li w25 flex-column align-center" @click="navigote('./order', 4)">
				<image src="../../static/mine/4.png" style="width: 66rpx; height: 66rpx; margin-bottom: 10rpx;"></image>
				<text style="line-height: 1; color: #454545; font-weight: 600;">已取消</text>
			</view>
		</view>
		
		<view class="box margin20">
			<view class="item flex-between align-center" @click="navigote('./hehuorenDetail')">
				<view class="flex align-center">
					<image src="../../static/tabbar/2.png" style="width: 46rpx; height: 46rpx;"></image>
					<text style="color: #454545; font-weight: 600; line-height: 1; padding-left: 50rpx;">消费合伙人</text>
				</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
			<view class="item flex-between align-center" @click="navigote('./storeOrder')">
				<view class="flex align-center">
					<image src="../../static/tabbar/2.png" style="width: 46rpx; height: 46rpx;"></image>
					<text style="color: #454545; font-weight: 600; line-height: 1; padding-left: 50rpx;">店铺订单</text>
				</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
			<view class="item flex-between align-center" @click="toInvite()">
				<view class="flex align-center">
					<image src="../../static/tabbar/2.png" style="width: 46rpx; height: 46rpx;"></image>
					<text style="color: #454545; font-weight: 600; line-height: 1; padding-left: 50rpx;">邀请码</text>
				</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
			<view class="item flex-between align-center" @click="navigote('./fans')">
				<view class="flex align-center">
					<image src="../../static/tabbar/2.png" style="width: 46rpx; height: 46rpx;"></image>
					<text style="color: #454545; font-weight: 600; line-height: 1; padding-left: 50rpx;">粉丝</text>
				</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
			<!-- <view class="item flex-between align-center" @click="navigote('./apply')" v-if="isWorker==0">
				<view class="flex align-center">
					<image src="../../static/tabbar/2.png" style="width: 46rpx; height: 46rpx;"></image>
					<text style="color: #454545; font-weight: 600; line-height: 1; padding-left: 50rpx;">邻工申请</text>
				</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view> -->
			<view class="item flex-between align-center" @click="navigote('./service')">
				<view class="flex align-center">
					<image src="../../static/tabbar/2.png" style="width: 46rpx; height: 46rpx;"></image>
					<text style="color: #454545; font-weight: 600; line-height: 1; padding-left: 50rpx;">邻工服务</text>
				</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
			<view class="item flex-between align-center" @click="navigote('redPocket')">
				<view class="flex align-center">
					<image src="../../static/tabbar/2.png" style="width: 46rpx; height: 46rpx;"></image>
					<text style="color: #454545; font-weight: 600; line-height: 1; padding-left: 50rpx;">红包兑换</text>
				</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
			<view class="item flex-between align-center" @click="navigote('./info')">
				<view class="flex align-center">
					<image src="../../static/tabbar/2.png" style="width: 46rpx; height: 46rpx;"></image>
					<text style="color: #454545; font-weight: 600; line-height: 1; padding-left: 50rpx;">完善资料</text>
				</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
		</view>
		
		<u-gap height="20"></u-gap>
		
		<u-tabbar v-model="current" :list="list" active-color="#D37430" @change="tabbarChange"></u-tabbar>
		
		<!-- 邀请绑定 -->
		<u-popup v-model="show" mode="center" border-radius="20">
			<view class="inviteVue relative">
				<image src="https://jg.zgxingongxiang.com/test/static/WeChat/1.png" mode="widthFix"></image>
				<view class="inner absolute-auto flex-column flex-between align-center">
					<view></view>
					<view class="flex-column align-center">
						<input type="text" placeholder="点击扫码二维码" v-model="inviteCode" disabled @click="scanFun()"/>
						<view class="confirm" @click="bandFun()">确认</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data() {
			return {
				statusBarHeight: 0,
				barHeight: 0,
				menuHeight: 0,
				show: false,
				isWorker: 0,
				inviteCode: ""
			}
		},
		computed: {
			...mapState({
				isLogin: state=> state.isLogin,
				list: state=> state.list,
				user: state=> state.user
			}),
			current: {
				get(){
					return this.$store.state.current
				},
				set(val) {
					this.$store.state.current = val
				}
			}
		},
		async onLoad() {
			let that = this;
			wx.getSystemInfo({
				success(res) {
					let deviceWidth = wx.getSystemInfoSync().windowWidth
					that.statusBarHeight = Number(res.statusBarHeight) * ( 750 / deviceWidth ) 
					let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
					that.menuHeight = Number(menuButtonInfo.height) * ( 750 / deviceWidth )
					let barHeight = menuButtonInfo.height + (menuButtonInfo.top - res.statusBarHeight) * 2
					that.barHeight = Number(barHeight) * ( 750 / deviceWidth )
				},
			});
		},
		onShow() {
			console.log("kkkkkkkkkkkkkkkkkkkkkk")
			this.check()
			uni.$on("reFrensh", ()=>{
				this.check()
			})
		},
		
		methods: {
			tabbarChange(e){
				console.log(e)
				this.$store.dispatch("getCurrent", e)
				uni.switchTab({
					url: this.list[e].path
				})
			},
			
			// 扫码绑定
			scanFun(){
				let that = this
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.inviteCode = res.result.split('=')[1]
						console.log("扫码获取的邀请码", that.inviteCode)
					}
				})
			},
			
			// 绑定
			async bandFun(){
				if(!this.inviteCode) return this.$u.toast("请扫码获取邀请码")
				const result = await this.$request("/api/WeChat/addInviteCode", {
					phoneNo: this.user.phoneNo,
					people: this.inviteCode
				}, "PUT")
				if(result.code===200) {
					this.$u.toast("绑定成功") 
					this.$store.dispatch("getUser")
				}else{
					this.$u.toast(result.msg)
				}
			},
			
			navigote(url, value){
				if(!this.isLogin) return this.$tools.route("../login/login")
				if(!url) return this.$u.toast("暂未开放")
				this.$tools.route(url, value)
			},
			
			toInvite(){
				if(!this.isLogin) return this.$tools.route("../login/login")
				if(!this.user.referrerId) return this.show = true
				this.navigote('./invite')
			},
			
			async check(){
				const res = await this.$request("/api/WeChat/checkWorker", {}, "GET")
				if(res.code==200) {
					console.log(res)
					this.isWorker = res.data
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		width: 690rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.item {
			width: 100%;
			height: 128rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}
	}
	.safeVue {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		background: #fff;
	}
	.topVue {
		width: 100%;
		background: #fff;
		position: fixed;
		left: 0;
		z-index: 109;
	}
	.inviteVue {
		width: 650rpx;
		height: 1035rpx;
		overflow: hidden;
		.inner {
			width: 100%;
			height: 100%;
			padding: 60rpx 0 140rpx;
			input {
				width: 520rpx;
				height: 90rpx;
				background: #fff;
				box-sizing: border-box;
				display: block;
				color: #454545;
				border: 1rpx solid #bdbdbd;
				border-radius: 45rpx;
				text-align: center;
			}
			.confirm {
				width: 320rpx;
				height: 88rpx;
				background: #D37430;
				border-radius: 20rpx;
				line-height: 88rpx;
				text-align: center;
				color: #fff;
				margin-top: 50rpx;
			}
		}
	}
</style>
